<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="baseTitle"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            label-width="auto"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1" v-if="formValue.type == 'name'">
                <n-form-item label="姓名" path="name">
                  <n-input placeholder="请输入姓名" v-model:value="formValue.name" />
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'phone'">
                <n-form-item label="手机号" path="phone">
                  <n-input placeholder="请输入手机号" v-model:value="formValue.phone" />
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'email'">
                <n-form-item label="邮箱" path="email">
                  <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'rate'">
                <n-form-item label="返佣比例" path="rate">
                  <n-input-number min="0" placeholder="请输入返佣比例" v-model:value="formValue.rate" >
                    <template #suffix>
                      %
                    </template>
                  </n-input-number>
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'minWithdrawalAmount'">
                <n-form-item label="最低可提现额" path="minWithdrawalAmount">
                  <n-input-number min="0" placeholder="请输入最低可提现额" v-model:value="formValue.minWithdrawalAmount" />
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'serviceCharge'">
                <n-form-item label="手续费" path="serviceCharge">
                  <n-input-number min="0" placeholder="请输入手续费" v-model:value="formValue.serviceCharge" />
                </n-form-item>
              </n-gi>
              <n-gi span="1" v-if="formValue.type == 'afterDay'">
                <n-form-item label="预计提现时间周期" path="afterDay">
                  <n-input-number min="0" placeholder="请输入预计提现时间周期" v-model:value="formValue.afterDay" />
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm"> 取消 </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Edit } from '@/api/pmsChannel';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useMessage } from 'naive-ui';
  import {validate} from "@/utils/validateUtil";

  const baseTitle = ref('')
  const emit = defineEmits(['reloadInfo']);
  const message = useMessage();
  const settingStore = useProjectSettingStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref({
    id: '',
    type: '',
    name: '',
    phone: '',
    email: '',
    rate: 0,
    minWithdrawalAmount: 0,
    serviceCharge: 0,
    afterDay: 0,
    status: 0,
  })
  const formRef = ref<any>({});
  const rules = ref({});
  const formBtnLoading = ref(false);

  function openModal(id, baseType, value) {
    formValue.value.id = id
    formValue.value.type = baseType
    formValue.value.name = value.name
    formValue.value.phone = value.phone
    formValue.value.email = value.email
    formValue.value.rate = value.rate
    formValue.value.minWithdrawalAmount = value.minWithdrawalAmount
    formValue.value.serviceCharge = value.serviceCharge
    formValue.value.afterDay = value.afterDay
    formValue.value.status = value.status

    if(baseType == 'name'){
      baseTitle.value = '编辑姓名'
    }else if(baseType == 'phone'){
      baseTitle.value = '编辑手机号'
      rules.value = {
        phone: {
          trigger: ['blur', 'input'],
          validator: validate.phone,
        },
      };
    }else if(baseType == 'email'){
      baseTitle.value = '编辑邮箱'
      rules.value = {
        email: {
          trigger: ['blur', 'input'],
          validator: validate.email,
        },
      };
    }else if(baseType == 'rate'){
      baseTitle.value = '编辑返佣比例'
      rules.value = {
        rate: {
          trigger: ['blur', 'input'],
          validator: validate.percentage
        },
      };
    }else if(baseType == 'minWithdrawalAmount'){
      baseTitle.value = '编辑最低可提现额'
    }else if(baseType == 'serviceCharge'){
      baseTitle.value = '编辑提现手续费'
    }else if(baseType == 'afterDay'){
      baseTitle.value = '编辑提现周期'
    }
    showModal.value = true;
  }

  function confirmForm(e) {
    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        Edit(formValue.value).then((_res) => {
          message.success('操作成功');
          setTimeout(() => {
            closeForm();
            formBtnLoading.value = false;
            emit('reloadInfo');
          });
        }).catch((err) => {
          formBtnLoading.value = false;
        });
      } else {
        message.error('验证错误');
        formBtnLoading.value = false;
      }
    });
  }

  function closeForm() {
    showModal.value = false;
    loading.value = false;
    formValue.value = {
      id: '',
      type: '',
      name: '',
      phone: '',
      email: '',
      rate: 0,
      minWithdrawalAmount: 0,
      serviceCharge: 0,
      afterDay: 0,
      status: 0,
    }
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less"></style>
